<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul id="text"></ul>
    <ul id="html"></ul>
    <ul id="json"></ul>
    <input type="button" value="getTextData" onclick="getTextData()">
    <input type="button" value="getHtmlData" onclick="getHtmlData()">
    <input type="button" value="getJSONData" onclick="getJSONData()">
    <input type="button" value="getTextData2" onclick="getJSONData2()">
    <script>
        /* 响应数据:是以HTTP协议规范的响应报文信息呈现
               响应头:包含服务器向浏览器回传的数据的相关描述(响应时间、响应数据类型、响应状态……)
               响应体:服务器向浏览器发送的额外数据,数据用于完成浏览显示结果的呈现(html、css、js、数据、图片、视频……)
               不是所有响应都有响应体:HTTP协议规范中 options 和 head 请求是没有响应体(options和head不用于数据加载,主要完成服务器状态检测)) */
        function getTextData() {
            let xhr = new XMLHttpRequest();
            let txtDom = document.querySelector("#text");
            xhr.open("get", "/text");
            xhr.onload = function () {
                let str = xhr.responseText;//普通文本数据直接取值，进行后续操作即可
                let arr = str.split(",");//响应的文本数据如何使用，取决于服务器返回的数据格式，需要根据格式自定义解析的相关规则
                let strHtml = "";
                arr.forEach(function (item) {
                    strHtml += `<li>${item}</li>`;
                });
                txtDom.innerHTML = strHtml;
            };
            xhr.send();
        }

        function getHtmlData() {
            let xhr = new XMLHttpRequest();
            let htmlDom = document.querySelector("#html");
            xhr.open("get", "/htmlStr");
            xhr.onload = function () {
                let str = xhr.responseText;//普通文本数据直接取值，进行后续操作即可
                console.log(str);
                htmlDom.innerHTML = str;
            };
            xhr.send();
        }

        function getJSONData() {
            let xhr = new XMLHttpRequest();
            let jsonDom = document.querySelector("#json");
            xhr.open("get", "/json");
            xhr.onload = function () {
                let arr = JSON.parse(xhr.responseText);
                let strHtml="";
                arr.forEach(function (item) {
                    strHtml += `<li>${item}</li>`;
                });
                jsonDom.innerHTML = strHtml;
            };
            xhr.send();
        }
        function getJSONData2() {
            let xhr = new XMLHttpRequest();

           /*  XMLHttpRequest.responseType 手动的设置返回数据的类型。
            如果取值为
                    空字符串，默认为"text"类型。
                    JSON：响应结果为一个JSON数据对象。该对象会被自动通过JSON.parse() 进行解析
                    TEXT：响应结果为 文本字符 

                    如果设置json,需要通过xhr.response 获取解析后的响应数据

                    
            */
            xhr.responseType="json";
            xhr.open("get", "/json");
            xhr.onload = function () {
                console.log(xhr.response);
               
            };
            xhr.send();
        }
    </script>
</body>

</html>